<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>系统用户管理</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
	</head>

	<body>
		 <div style="margin:10px 10px;">
		<div class="layui-elem-quote">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href=""><span class="layui-icon layui-icon-template"></span>基础信息管理</a>
			<a href=""><span class="layui-icon layui-icon-user"></span>系统用户管理</a>
			</span>
		</div>

		<div>
			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">用户名：</label>
					<div class="layui-input-inline">
						<input type="text" id="" class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">用户权限：</label>
					<div class="layui-input-inline">
						<select name="">
							<option value="">全部</option>
							<option value="0">系统管理员</option>
							<option value="1">普通资产管理员</option>
							<option value="2">固定资产管理员</option>
							<option value="3">车辆管理员</option>
							<option value="4">财务总监</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<div class="layui-input-inline">
						<a href="" class="layui-btn layui-btn-success">
							<span class="layui-icon layui-icon-search"></span>检索search</a>
					</div>
				</div>
			</form>
		</div>

		<!--<div class="layui-card">
			<div class="layui-card-body">
				<table class="layui-table">
					<tr>
						<th><span class="layui-icon layui-icon-note">用户名</th>
							<th>权限</th>
							<th>昵称</th>
							<th>创建时间</th>
						</tr>
					<tr>
							<td>admin</td>
							<td>系统管理</td>
							<td>系统管理员</td>							
		     				<td>2015-12-13 09：30</td>
						</tr>
						<tr>
							<td>normal</td>
							<td>普通资产</td>
							<td>普通资产管理员</td>
							
							<td>2015-12-13 11：18</td>
						</tr>
						<tr>
							<td>permanent</td>
							<td>固定资产</td>
							<td>固定资产管理员</td>							
							<td>2015-12-13 11：18</td>
						</tr>
						<tr>
							<td>car</td>
							<td>车辆资产</td>
							<td>车辆管理员</td>							
							<td>2015-12-13 11：19</td>
						</tr>
						<tr>
							<td>finance</td>
							<td>财务资产</td>
							<td>财务总监</td>							
							<td>2015-12-13 11：19</td>
						</tr>		
					<tr>
						<td colspan="4">显示第1到第5条记录，总共5条记录&nbsp;&nbsp;每页显示10条记录</td>
					</tr>
					
				</table>
                                                 
			</div>
		</div>-->

		<script src="../layui/layui.all.js"></script>
		<script>
			layui.use(['element', 'form', 'laypage','table'], function() {
				var element = layui.element;
				var page = layui.laypage;
				var form = layui.form;
				var table = layui.table;
				table.render({
					elem: '#demo',
					height: 270,
					width: 1173,
					url: 'tableJson/sysUserManage.json',
					page: true, //开启分页
						
					limit: 5,
					limits: [5, 10, 15, 20, 25, 30],
					loading: false,
					done: function(res, curr, count) {
						$("table").css("width", "90%");
					},
					cols: [
						[ //表头
							{
								field: 'id',
								title: '用户名',
								width: 288,
								sort: true,
								fixed: 'left'
							}, {
								field: 'showvalue',
								title: '权限',
								width: 293
							}, {
								field: 'class',
								title: '昵称',
								width: 293,
								sort: true
							}, {
								field: 'desc',
								title: '创建时间',
								width: 295
							}, 
						]
					]
				});

			});
		</script>

		<div class="layui-row">
			<table id="demo" lay-filter="test" ></table>
		</div>	
		<div align="right">
			<div id="page"> </div>
		</div>
		</div>
	</body>

</html>